//文档加载事件
window.addEventListener('load',function(){
    //banner轮播图
    new Swiper ('.swiper', {
        //direction: 'vertical', // 垂直切换选项 水平方向切换(horizontal)或垂直方向切换(vertical)
        loop: true, // 循环模式选项
        autoplay:true,
        
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
        },
        
        // 如果需要前进后退按钮
        // navigation: {
        //   nextEl: '.swiper-button-next',
        //   prevEl: '.swiper-button-prev',
        // }
        
        
      }) ;
// service
    /* 
      页面数据的动态渲染 --把后端提供的数据渲染到网页中

        步骤:
            1.获取数据源---后期使用ajax获取---目前只做数据模拟操作
            2.定义变量保存循环出来的html结构
            3.遍历数据源,拼接html结构
            4.把指定拼接好的结构放到指定位置  serviceList
    */

    //1.数据模拟--数据源
    // let arr=['API私有化服务','源码云监测','源码有赢','YuanMa API'];

    let arr=[
        {
            imgUrl:'./imgs/service01.svg',
            title:'API私有化服务',
            desc:'可部署本地&专有云的Web API'
        },
        {
            imgUrl:'./imgs/service02.svg',
            title:'源码云监测',
            desc:'可部署本地&专有云的Web API'
        },
        {
            imgUrl:'./imgs/service03.svg',
            title:'源码有赢',
            desc:'可部署本地&专有云的Web API'
        },
        {
            imgUrl:'./imgs/service04.svg',
            title:'YuanMa API',
            desc:'可部署本地&专有云的Web API'
        }


    ]

    //2.定义变量保存拼接结构
    /* 
    
      格式:
      <li class="service-list fl">
                <img src="./imgs/service01.svg" alt="">
                <div class="service-font">
                    <h4 class="font16">API私有化服务</h4>
                    <p class="font10 c666">可部署本地&专有云的Web API</p>
                    <a href="#" class="font12">去搜索</a>
                </div>
            </li>
    */

    let sHtml='';
    //3.遍历数据源,拼接html结构
    arr.forEach(function(v){
        // console.log(v); //获取到数据源中的每一条数据

        sHtml+=`
        <li class="service-list">
                <img src="${v.imgUrl}" alt="">
                <div class="service-font">
                    <h4 class="font16">${v.title}</h4>
                    <p class="font10 c666">${v.desc}</p>
                    <a href="#" class="font12">去搜索</a>
                </div>
            </li>
        `
    })
    //查看拼接后的数据
    // console.log(sHtml);
    serviceList.innerHTML=sHtml;
//end service
// 分类 sort
let apiData=[
    {
        imgUrl:'./imgs/api01.svg',
        title:'生活服务'
    },
    {
        imgUrl:'./imgs/api02.svg',
        title:'金融科技'
    },
    {
        imgUrl:'./imgs/api03.svg',
        title:'交通地理'
    },
    {
        imgUrl:'./imgs/api04.svg',
        title:'充值缴费'
    },
    {
        imgUrl:'./imgs/api05.svg',
        title:'数据智能'
    },
    {
        imgUrl:'./imgs/api06.svg',
        title:'企业工商'
    },
    {
        imgUrl:'./imgs/api07.svg',
        title:'应用开发'
    },
    {
        imgUrl:'./imgs/api08.svg',
        title:'电子商务'
    },
    {
        imgUrl:'./imgs/api09.svg',
        title:'吃喝玩乐'
    },
    {
        imgUrl:'./imgs/api10.svg',
        title:'文娱视频'
    }
];
 //2.定义变量保存数据结构
 let apiHtml='';

 //3.遍历拼接结构
 /* 
     格式:
          <li class="sort-list fl">
                        <div class="sort-css">
                            <img src="./imgs/api01.svg" alt=""><br>
                            <a href="">生活服务</a>
                        </div>
                    </li>
 */

    apiData.forEach(function(v){
        // console.log(v)

        apiHtml+=`
        <li class="sort-list fl">
                        <div class="sort-css">
                            <img src="${v.imgUrl}" alt=""><br>
                            <a href="">${v.title}</a>
                        </div>
                    </li>
        `
    })

 //4.添加到指定位置
 apiList.innerHTML=apiHtml;
 // console.log(apiData);
 /* 
        移入:  给当前a标签添加一个背景色,把img图换成api0x-c.svg , h4文本白色

        移出: 把所有相关js操作过的都还原回去
    */
let aDom = this.document.querySelectorAll('#apiList li div')
    aDom.forEach(function(v){
        v.addEventListener('mouseover',function(){
            //给当前a标签添加背景色
            this.style.backgroundColor='#2f7ee9';
            //给当前a标签中的h4标签添加白色
            this.lastElementChild.style.color='#fff';
            // console.log(this);
            //1.获取当前img的地址
            let imgUrl=this.firstElementChild.src;
       

                //保存一份
                    oldSrc=imgUrl;

            //2.处理地址---从地址中获取 图像文件名 如: api06.svg
            //获取从后往前数的 / 的索引值
            let index=imgUrl.lastIndexOf('/');
            //从指定索引截取后面所有字符串
            let newUrl=imgUrl.substring(index+1);

            this.firstElementChild.src=`./imgs/${newUrl.split('.')[0]}-c.svg`

           
            // console.log(newUrl);
            // console.log(newUrl.split('.')[0]);
        })
        v.addEventListener('mouseout',function(){
            this.style.backgroundColor='';
            this.lastElementChild.style.color='';
            this.firstElementChild.src=oldSrc;
        })
    })

 // end 分类 sort

//  unicorn
 //独角兽
    //1.获取所有相关的元素对象
    let unicorn=getEleAll('#unicorn .container');
    //2.定义全局索引值
    let index=0;

    //3.动态设置默认选中第一个
    unicorn[index].style.display='block';

    //动态切换效果  2s换一次
    window.setInterval(function(){
        //把前一个隐藏起来
        unicorn[index].style.display='none';
        
        index++;

        //判定
        if(index==unicorn.length){
            index=0;
        }

        unicorn[index].style.display='block';
    },2000)
// end unicorn

// 返回顶部
    
    //1.获取相关对象
    let returnTop=document.getElementById('returntop');
    //3.注册事件
        window.addEventListener('scroll',function(){
            let sTop=document.documentElement.scrollTop;
            //2.判定
            if(sTop>=300){
                //显示返回顶部
                returnTop.style.display='block';
            }else{
                //隐藏返回顶部
                returnTop.style.display='';
            }
            console.log(sTop);
        }) 
    let timeId = null;
    //注册returnTop
        returnTop.addEventListener('click',function(){
                window.clearInterval(timeId);
                timeId = window.setInterval(function(){
                    //获取当前滚动条的位置
                    let sTop = document.documentElement.scrollTop;
                    // console.log(sTop);
                
                    document.documentElement.scrollTop = sTop-30;
                    //清除定时器
                    if(sTop<=0){
                        window.clearInterval(timeId);
                    }
                },10) 
            })

// end  返回顶部
})